<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>作业</title>
    <style>
      ul{list-style:none;padding:0;margin:0}
      div{width:200px;border:1px solid #515E7B;margin:10px;}
      div li{background:#515E7B;border-bottom:1px solid #fff;}
      div li a{text-decoration:none;color:#fff;font-size:16px;height:40px;line-height:40px;padding-left:10px;}
      div li a:hover{text-decoration:underline;}
      .wrap {width:200px;display:none;}
      .wrap li{background: #fff;margin: 0;}
      .wrap li a{color:#3B475F;font-size:12px;}
      .one {font-weight:bold;}
    </style>
  </head>
  <body>
    <div id="fold">
      <ul>
            <li>
                    <ul class="one">
                        <a>18级移动三班</a>
                        <li><a>181164219</a></li>
                        <li><a>孙曼</a></li>
                    </ul>
                </li>
            <li>
            <li>
                    <a href="#">第一章</a>
                    <ul class="wrap">
                        <li><a href="1-1.html">改变页面颜色</a></li>
                        <li><a href="1-2.html">输入密码</a></li>
                    </ul>
                </li>
            <li>
                    <a href="#">第二章</a>
                    <ul class="wrap">
                        <li><a href="2-1.html">圆的面积和体积</a></li>
                        <li><a href="2-2.html">金字塔</a></li>
                        <li><a href="2-3.html">九九乘法表</a></li>
                    </ul>
                </li>
            <li>
                    <a href="#">第三章</a>
                    <ul class="wrap">
                        <li><a href="3-1.html">查找最大值</a></li>
                        <li><a href="3-2.html">二维数组转置</a></li>
                        <li><a href="3-3.html">猴子选大王</a></li>
                        <li><a href="3-4.html">省份城市的三级联动</a></li>
                    </ul>
                </li>
            <li>
                    <a href="#">第四章</a>
                    <ul class="wrap">
                        <li><a href="4-1.html">字符串大小写转换</a></li>
                        <li><a href="4-2.html">求裴波纳契数列第N项的值</a></li>
                        <li><a href="4-3.html">网页计算机</a></li>
                    </ul>
                </li>
            <li>
                    <a href="#">第五章</a>
                    <ul class="wrap">
                        <li><a href="5-1.html">制作年历</a></li>
                        <li><a href="5-2.html">表单生成器</a></li>
                    </ul>
                </li>
            <li>
                    <a href="#">第六章</a>
                    <ul class="wrap">
                        <li><a href="6-1.html">限时秒杀</a></li>
                        <li><a href="6-2.html">定时跳转</a></li>
                        <li><a href="6-3.html">红绿灯倒计时</a></li>
                    </ul>
                </li>
            <li>
                    <a href="#">第七章</a>
                    <ul class="wrap">
                        <li><a href="7-1.html">改变盒子大小</a></li>
                        <li><a href="7-2.html">标签栏切换效果</a></li>
                        <li><a href="7-3.html">列表的增删和移动</a></li>
                        <li><a href="7-4.html">购物车</a></li>
                    </ul>
                </li>
        <li>
                <a href="#">第八章</a>
                <ul class="wrap">
                    <li><a href="8-1.html">缓动的小球</a></li>
                    <li><a href="8-2.html">鼠标拖曳特效</a></li>
                    <li><a href="8-3.html">图片放大特效</a></li>
                </ul>
            </li>
        <li>
                <a href="#">第九章</a>
                <ul class="wrap">
                    <li><a href="10-1.html">限定输入内容</a></li>
                    <li><a href="10-2.html">内容查找与替换</a></li>
                    <li><a href="10-3.html">表单验证</a></li>
                </ul>
            </li>
        <li>
                <a href="#">第十章</a>
                <ul class="wrap">
                    <li><a href="10-1.html">商品评论无刷新分页</a></li>
                    <li><a href="10-2.html">进度条文件上传</a></li>
                </ul>
            </li>
          <li>
                <a href="#">第十一章</a>
                <ul class="wrap">
                    <li><a href="11-1.html">折叠菜单</a></li>
                    <li><a href="11-2.html">左移与右移</a></li>
                    <li><a href="11-3.html">手风琴效果</a></li>
                    <li><a href="11-4.html">无缝轮播图</a></li>
                    <li><a href="11-5.html">自定义全选与反选插件</a></li>
                </ul>
            </li>
            <li>
                <a href="#">第十二章</a>
                <ul class="wrap">
                    <li><a href="12-1.html">商品评论无刷新分页</a></li>
                </ul>
            </li>
      </ul>
    </div>
    <script src="jquery-1.12.4.min.js"></script>
    <script>
      $('#fold>ul>li:first').find('.wrap').css({display: 'block'});
      $('#fold>ul>li').click(function() {
        $(this).siblings('li').find('.wrap').css({display: 'none'});
        $(this).find('.wrap').css({display: 'block'});
      });
    </script>
  </body>
</html>
